<template>
	<div>
		<div class="left-bar" v-if="leftMenuList.length" v-drag-control>
			<div class="bar-side-inner">
				<a
					class="flex flex-v"
					@click="checkMenu(item)"
					href="javascript:;"
					v-for="(item, index) in showMenuList"
				>
					<a-badge :count="handUserList.length" v-if="item.type == 'hand' && handUserList.length > 0">
						<img
							:src="
								currentKey == item.type
									? item.img + '_selected.png'
									: (isPro ? item.img_pro : item.img) + '.png'
							"
							class="icon"
						/>
						<div style="line-height: 1.5">{{ item.name }}</div></a-badge
					>
					<template v-else>
						<img
							:src="
								currentKey == item.type
									? item.img + '_selected.png'
									: (isPro ? item.img_pro : item.img) + '.png'
							"
							class="icon"
						/>
						<div>{{ item.name }}</div>
					</template>
				</a>
				<a-popover placement="left" trigger="click" v-if="morelist.length > 0" v-model="showMore">
					<template slot="content">
						<div class="popoverbox flex flex-wrap">
							<a
								class="flex flex-v"
								@click="checkMenu(item)"
								href="javascript:;"
								v-for="(item, index) in morelist"
								><a-badge
									:count="handUserList.length"
									v-if="item.type == 'hand' && handUserList.length > 0"
								>
									<img
										:src="
											currentKey == item.type
												? item.img + '_selected.png'
												: (isPro ? item.img_pro : item.img) + '.png'
										"
										class="icon"
									/>
									<div style="line-height: 1.5">{{ item.name }}</div></a-badge
								><template v-else>
									<img
										:src="
											currentKey == item.type
												? item.img + '_selected.png'
												: (isPro ? item.img_pro : item.img) + '.png'
										"
										class="icon"
									/>
									<div>{{ item.name }}</div>
								</template>
							</a>
						</div>
					</template>
					<a class="flex flex-v" href="javascript:;">
						<!-- <img
							:src="
								morelist.some((item) => item.type == currentKey)
									? '/impromptu/toolbar/icon07_selected.png'
									: (isPro ? '/impromptu_pro/toolbar/icon07' : '/impromptu/toolbar/icon07') + '.png'
							"
							class="icon"
						/>
						<div>更多</div> -->
						<a-badge
							:count="handUserList.length"
							v-if="morelist.some((item) => item.type == 'hand') && handUserList.length > 0"
						>
							<img
								:src="
									morelist.some((item) => item.type == currentKey)
										? '/impromptu/toolbar/icon07_selected.png'
										: (isPro ? '/impromptu_pro/toolbar/icon07' : '/impromptu/toolbar/icon07') +
										  '.png'
								"
								class="icon"
							/>
							<div style="line-height: 1.5">更多</div></a-badge
						><template v-else>
							<img
								:src="
									morelist.some((item) => item.type == currentKey)
										? '/impromptu/toolbar/icon07_selected.png'
										: (isPro ? '/impromptu_pro/toolbar/icon07' : '/impromptu/toolbar/icon07') +
										  '.png'
								"
								class="icon"
							/>
							<div>更多</div>
						</template>
					</a>
				</a-popover>
				<!-- <div class="qrbox" v-if="qrCodeDataUrl" @click="amplifyQrCode" title="点击查看上课二维码">
					<img :src="minProjectLogin ? qrCodeDataUrl2 : qrCodeDataUrl" alt="" />
				</div> -->
			</div>
		</div>
		<globalModal
			title="上课二维码"
			:visible="visible"
			:width="350"
			:bodyStyle="bodyStyle"
			:confirmLoading="confirmLoading"
			@ok="handleOk"
			@cancel="handleCancel"
			:footer="null"
		>
			<div class="text-center" style="text-align: center">
				<img :src="minProjectLogin ? qrCodeDataUrl2 : qrCodeDataUrl" alt="" width="250" />
			</div>
		</globalModal>
	</div>
</template>

<script>
import { mapState } from 'vuex';
import QRCode from 'qrcode';
import { ModalMixins } from '@/mixins';
import Vue from 'vue';
import VDrag from 'v-drag';
import { debounce } from '@/utils/base.js';
Vue.use(VDrag);
export default {
	name: 'toolBar',
	mixins: [ModalMixins],
	data() {
		return {
			qrCode: '',
			qrCodeDataUrl: '',
			qrCodeDataUrl2: '',
			bodyStyle: {
				maxHeight: '450px',
				minHeight: '100px',
				overflow: 'auto',
			},
			showMenuList: [],
			morelist: [],
			showMore: false,
		};
	},
	props: {
		list: {
			type: Array,
			default: () => [],
		},
		currentKey: {
			type: String,
			default: '',
		},
		csId: {
			type: String,
			default: '',
		},
		handUserList: {
			type: Array,
			default: () => [],
		},
	},
	computed: {
		...mapState({
			isPro: (state) => state.isPro,
			minProjectLogin: (state) => state.minProjectStore.minProjectLogin, //小程序是否登录
		}),
		//是否有学生名单,临时题统计
		isHasleftMenuList() {
			let comList = [
				'doExercise:studentlist',
				'impromptuQA:answerCount',
				'doExercise:signin',
				'doExercise:quickanswer',
				'doExercise:drawstraws',
				'doExercise:vote',
				'doExercise:hand',
				'doExercise:interaction',
				'doExercise:resources',
				'doExercise:group',
			]; //左侧菜单权限
			let isHasComList = [];
			comList.forEach((item) => {
				console.log('item', item, this.$_has(item));
				if (this.$_has(item)) {
					isHasComList.push(item);
				}
			});
			return isHasComList;
		},
		leftMenuList() {
			let comList = [
				'doExercise:studentlist',
				'impromptuQA:answerCount',
				'doExercise:signin',
				'doExercise:quickanswer',
				'doExercise:drawstraws',
				'doExercise:vote',
				'doExercise:hand',
				'doExercise:interaction',
				'doExercise:resources',
				'doExercise:group',
				'doExercise:mole',
			]; //左侧菜单权限
			let list = this.list.filter((item) => {
				if (!item.perms || (item.perms && this.$_has(item.perms))) {
					return item;
				}
			});
			console.log('item', list);
			return list;
		},
	},
	watch: {
		minProjectLogin: {
			handler(newValue, oldValue) {
				if (newValue) {
					this.visible = false;
				}
			},
			immediate: true,
		},
		leftMenuList: {
			handler(newValue, oldValue) {
				this.handleResize();
			},
			immediate: true,
		},
	},
	// created() {
	// 	let beginClassData = this.$ls.get('beginClass');
	// 	if (beginClassData && beginClassData.csId) {
	// 		this.generateQRCode(beginClassData.csId);
	// 	}
	// },
	mounted() {
		window.addEventListener('resize', debounce(this.handleResize, 500), true);
	},
	methods: {
		checkMenu(item) {
			this.showMore = false;
			if (item.type == 'resources' && this.minProjectLogin) {
				this.$message.error('移动端正在控制PC端，请使用移动端查看资源');
				return;
			}
			this.$emit('checked', item);
		},
		async generateQRCode(qrCode, color) {
			try {
				const dataUrl = await QRCode.toDataURL(
					JSON.stringify({
						code: qrCode,
						name: '开始上课',
						company: '深圳中科讯联科技股份有限公司',
					}),
					{
						margin: 0,
						size: 300,
					}
				);
				const dataUrl2 = await QRCode.toDataURL(
					JSON.stringify({
						code: qrCode,
						name: '开始上课',
						company: '深圳中科讯联科技股份有限公司',
					}),
					{
						margin: 0,
						size: 300,
						color: {
							dark: this.isPro ? '#5697f5' : '#00BEC5', //前景色
							light: '#ffffff', //背景色
						},
					}
				);
				this.qrCodeDataUrl = dataUrl;
				this.qrCodeDataUrl2 = dataUrl2;
			} catch (error) {
				console.error('Error generating QR Code:', error);
			}
		},

		//放大直播间二维码
		amplifyQrCode() {
			this.visible = true;
		},
		handleResize() {
			//200 是菜单栏上下剩余高度。96，菜单栏默认高度
			let h = window.innerHeight - 220 - 100,
				num = Math.floor(h / 67),
				list = [],
				morelist = [];
			// console.log('Math.floor(num)', Math.floor(num));
			if (num >= this.leftMenuList.length) {
				list = this.leftMenuList;
				morelist = [];
			} else {
				let morenum = this.leftMenuList.length - num > 1 ? num - 1 : this.leftMenuList.length - 2;
				// console.log('morenum', morenum);
				morelist = this.leftMenuList.slice(morenum, this.leftMenuList.length);
				list = [...this.leftMenuList.slice(0, num - 1)];
			}
			this.showMenuList = [...list];
			this.morelist = [...morelist];
		},
	},
	// 销毁监听
	beforeDestroy() {
		window.removeEventListener('resize', this.handleResize);
	},
};
</script>

<style lang="less" scoped>
.left-bar {
	position: fixed;
	right: 0;
	cursor: move;
	/* position: absolute;
		left: 6px; */
	bottom: 150px;
	z-index: 999;
	width: 90px;

	/* &::before {
			content: '';
			position: absolute;
			top: 0;
			left: -6px;
			bottom: 0;
			width: 6px;
			height: 100%;
			background-color: @primary-color;
		} */

	.bar-side-inner {
		border: 2px solid @primary-color;
		/* border-radius: 0 10px 10px 0; */
		border-radius: 10px;
		position: relative;
		background: #fff;
		// border-left: 6px solid @primary-color;
		a {
			/* padding: 5px 20px; */
			margin: 5px 15px;
			&:first-child {
				padding-top: 10px;
			}

			&:last-child {
				padding-bottom: 10px;
			}

			text-align: center;
			.icon {
				width: 46px;
				height: 46px;
				margin: 0 auto;
			}
		}
	}

	/* .qrbox img {
		width: 100%;
		height: auto;
		border-radius: 0 0 6px 6px;
	} */
	.qrbox {
		padding: 10px 10px 0 10px;
		width: 100%;
		height: 86px;
		border-radius: 0 0 6px 6px;
		cursor: pointer;
		img {
			width: 100%;
			height: auto;
			border-radius: 0 0 6px 6px;
		}
	}
}
.popoverbox {
	width: 220px;
	text-align: center;
	a {
		margin: 10px;
	}
	.icon {
		width: 46px;
		height: 46px;
		margin: 0 auto;
	}
}
</style>
